<template>
	<view class="wanl-order-list">
		<scroll-view :scroll-left="scrollLeft" scroll-x="true" class="navbar bg-white margin-bottom-sm fixed">
			<view class="nav-item text-df margin-lr" v-for="(item, index) in navList" :key="item.status" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</scroll-view>
		<!-- {{navList[tabCurrentIndex].orderList}} -->
		
		<wanl-scroll-list ref="list" :option="{ page: 1, auto: true, safeArea: true ,emptyImage:$wanlshop.oss('/uploads/20230922/bf1554b8b3aef7aed61e0b36f2ca8e55.jpg') }" @load="load($event,'load')" @refresh="load($event,'refresh')" style="padding-top: 80rpx;">
			<view class="tab-content">
				<!-- 订单列表 -->
				<view v-for="(order, okey) in orderList" :key="okey" class="order-item">
					<view class="header">
						<view class="shop flex align-center justify-start">
							<text class="text-df">订单编号</text>
							<text class="text-s" @tap="$wanlshop.copy(order.order_sn)">{{order.order_sn}}</text>
						</view>
						<view class="text-sm">
							<text v-if="order.is_refund == 1" class="state" style="color: red;">售后</text>
							<text v-else class="state" :style="{ color: order.stateTipColor }">{{ order.stateTip }}</text>
							<!-- <text class="margin-left-sm wlIcon-lajitong" @tap="deleteOrder(order.id,okey)"></text> -->
						</view>
					</view>
					<!-- 商品 -->
					<view class="goods-box" :key="order.id" @tap="$wanlshop.to(`/pages/user/record/domestic/details?id=${order.id}&type=homeking&t=1`)">
						<view class="cu-avatar xl margin-right-sm radius" :style="{backgroundImage: 'url('+$wanlshop.oss(order.servesinfo.image, 70, 70)+')'}"> </view>
						<view class="content margin-right-bj">
							<view class="describe">
								<view class="text-cut-2">
									{{order.servesinfo.title}}
								</view>
								<view style="display: flex;justify-content: flex-start;">
									<text class="">服务地址：</text>
									<text class="text-cut-1">{{`${order.address_detail}`}}</text>
								</view>
								<view class="">
									<text class="">下单时间：</text>
									<text class="">{{order.createtime_text}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 底部 -->
					<view class="price-box text-sm flex">
						<view>合计：<text class="text-price">{{order.order_money}}</text></view>
					</view>
					<view class="action-box padding-bottom-bj">
						<button v-if="order.status < 7" class="cu-btn radius10 line-green margin-right-sm" @tap="$wanlshop.auth('/pages/user/service')">联系客服</button>
						<button v-if="order.status == 1" class="cu-btn radius10 line-green margin-right-sm" @tap="cancelOrder(order)">取消订单</button>
						<button v-if="order.status == 1" class="cu-btn radius10 bg-green margin-right-sm" @tap="paymentOrder(order.id)">立即支付</button>
						<button v-if="order.status == 6" class="cu-btn radius10 margin-right-sm line-green" @tap="commentOrder(order)">评论订单</button>
						<button v-if="order.status == 4" class="cu-btn radius10 margin-right-sm bg-green" @tap="startService(order,okey)">确认完成</button>
						<button v-if="(order.status == 2 || order.status == 3) && order.overaftersale == 1" class="cu-btn radius10 margin-right-sm bg-green" @tap="onRefund(order)">{{order.is_refund == 1? '查看售后' : '申请售后'}}</button>
					</view>
				</view>
			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList:[],
			tabCurrentIndex: 0,
			navList: [
				{
					status: 0,
					text: '全部'
				},
				{
					status: 1,
					text: '待支付'
				},
				{
					status: 2,
					text: '等待分配服务人员'
				},
				{
					status: 3,
					text: '等待服务'
				},
				{
					status: 9,
					text: '服务中'
				},
				{
					status: 4,
					text: '服务人员已确认'
				},
				// {
				// 	status: 5,
				// 	text: '用户已确认完成'
				// },
				{
					status: 6,
					text: '待评价'
				},{
					status: 7,
					text: '已完成'
				},{
					status: 8,
					text: '服务取消'
				}
			],
			
			scrollLeft: 0
		};
	},
	onShow() {
		if(this.$refs.list) {
			this.load({page:1},'refresh')
		}
	},
	methods: {
		onRefund(item){
			let obj = {
				order_id: item.id,
				order_type: 'homeking',
				goods: {
					image: item.servesinfo.image,
					title: item.servesinfo.title,
					difference: item.serves.name
				}
			}
			// is_refund  1 不可以售后  2 可以售后
			if (item.is_refund == 2) { //申请退款
				this.$wanlshop.to(`/pages/user/refund/apply?data=${encodeURIComponent(JSON.stringify(obj))}`);
			}else{ // 查看详情
				this.$wanlshop.to(`/pages/user/refund/details?id=${item.refund_sn}`);
			}
		},
		load(paging,key) {
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let order_status = navItem.status;
			uni.request({
				url: `/addons/homeking/api.order/user_order`,
				data: {
					status: order_status,
					page: paging.page
				},
				success: res => {
					let orderList = res.data.data.filter(item => {
						//添加不同状态下订单的表现形式
						item = Object.assign(item, this.orderStateExp(item.status));
						//演示数据所以自己进行状态筛选
						if (order_status === 0) {
							//0为全部订单
							return item;
						}
						return item.status === order_status;
					});
					if(key == 'load') {
						this.orderList = [...this.orderList, ...orderList];
						this.$refs.list.loadSuccess({ list: this.orderList, total: res.data.total });
					} else if(key == 'refresh') {
						this.orderList = orderList;
						this.$refs.list.refreshSuccess({ list: orderList, total: res.data.total });
					}
				}
			});
		},

		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.$refs.list.refreshScrollView()
			this.load({page:1},'refresh')
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			
			this.$refs.list.refreshScrollView()
			this.load({page:1},'refresh')
			this.scrollLeft = index * 60
		},
		//取消订单- 设置为7 -全局
		async cancelOrder(item) {
			uni.showLoading({
				title: '请稍后'
			});
			// 获取列表
			await uni.request({
				url: `/addons/homeking/api.order/user_cancel`,
				method: 'POST',
				data: {
					order_id: item.id
				},
				success: res => {
					
					this.$wanlshop.msg('订单取消成功')
					this.$refs.list.refreshScrollView()
					this.load({page:1},'refresh')
					uni.hideLoading();
				}
			});
		},
		commentOrder(order){
			let data = {
				image: order.servesinfo.image,
				title: order.servesinfo.title,
				sub_title: `${order.serves.price}/${order.serves.show_unit}*${order.serves.quantity}`,
				source_id: order.serves_id,
				goods_id:order.goods_id
			}
			this.$wanlshop.to(`/pages/user/record/comment?order_id=${order.id}&type=homeking&t=1&data=${encodeURIComponent(JSON.stringify(data))}`);
		},
		//支付订单
		paymentOrder(id){
			this.$wanlshop.to(`/pages/user/money/pay?id=${id}&type=homeking`);
		},
		//订单状态文字和颜色
		orderStateExp(status) {
			let stateTip = '',
				stateTipColor = '#4CBD66';
			switch (+status) {
				case 1:
					stateTip = '待支付';
					stateTipColor = '#f40';
					break;
				case 2:
					stateTip = '等待分配服务人员';
					stateTipColor = '#f40';
					break;
				case 3:
					stateTip = '等待服务';
					stateTipColor = '#f40';
					break;
				case 9:
					stateTip = '服务中';
					stateTipColor = '#f40';
					break;
				case 4:
					stateTip = '服务人员已确认';
					break;
				case 5:
					stateTip = '用户已确认完成';
					break;
				case 6:
					stateTip = '待评价';
					break;
				case 7:
					stateTip = '已完成';
					stateTipColor = '#777';
					break;
				case 8:
					stateTip = '服务取消';
					stateTipColor = '#777';
					break;
				//更多自定义
			}
			return {
				stateTip,
				stateTipColor
			};
		},
		async startService(order,index) {
			await uni.request({
				url: `/addons/homeking/api.order/user_confirm`,
				method: 'POST',
				data: {
					order_id: order.id
				},
				success: res => {
					
					this.$refs.list.refreshScrollView()
					this.load({page:1},'refresh')
					this.$wanlshop.msg(res.msg)
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
page {
	height: 100vh;
}
.navbar {
	display: flex;
	justify-content: flex-start;
	white-space: nowrap;
	.nav-item {
		display: inline-flex;
	}
}
.order-item {
	margin: 0 0 10rpx 0;
	padding: 12rpx 0 20rpx 30rpx;
	&:last-child {
		margin: 0;
	}
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 42rpx;
		padding-right: 30rpx;
		.state {
			display: inline-block;
			font-family: PingFang SC-Medium, PingFang SC;
			height: 42rpx;
		}
		.shop {
			text {
				display: inline-block;
				&:nth-child(1) {
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #888888;
					height: 42rpx;
					line-height: 42rpx;
				}
				&:nth-child(2) {
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					height: 42rpx;
					line-height: 42rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.goods-box {
		padding-top: 0;
		margin-top: 16rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.cu-avatar {
			width: 140rpx;
			height: 140rpx;
		}
		.describe {
			> text {
				display: inline-block;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 44rpx;
				margin-bottom: 18rpx;
			}
			view {
				// display: flex;
				// justify-content: flex-start;
				&:nth-child(1) {
					margin-bottom: 10rpx;
				}
				text{
					// display: inline-block;
					&:nth-child(1) {
						font-size: 27rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						color: #888888;
						line-height: 44rpx;
					}
					&:nth-child(2) {
						font-size: 25rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						color: #333333;
						line-height: 44rpx;
						width: 400rpx;
					}
				}
			}
		}
	}
	.price-box {
		padding: 0;
		padding-right: 30rpx;
		margin: 12rpx 0 0 0;
		font-size: 20rpx;
		color: #888888;
		text {
			font-size: 36rpx;
			color: #E31F1F;
			font-weight: bold;
		}
	}
	.action-box {
		padding-bottom: 0;
		button {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			margin-top: 28rpx;
		}
	}
}
</style>
